代码之家  ›  专栏  ›  技术社区  ›  KAT

将保存为文本的html保存到数据库并发送回浏览器?

  •  1
  • KAT  · 技术社区  · 6 年前

    所以我想建立一个博客网站。用户可以通过wysiwyg保存博客,并将其作为文本字符串保存到数据库中。不过,我遇到了一个问题。 当我将其转储回浏览器时,它将全部转义并呈现为一个巨大的字符串。为了避免这种情况,我这样做了:

    renderContent = () => {
      if (this.props.content_type === "blog") {
        let parser = new DOMParser();
        let title = parser.parseFromString(this.props.title, "text/html");
        let decoded_title = title.body.textContent;
    
        let content = parser.parseFromString(this.props.content, "text/html");
        let decoded_content = content.body.textContent;
    
        return (
          <div>
            <div>
              <img src={this.props.hero_image} alt="hero image" />
            </div>
            <div>
              <button onClick={this.props.handleClose}>Back</button>
            </div>
            <div>{decoded_title}</div>
            <div>{decoded_content}</div>
          </div>
        );
      }
    };
    

    我的问题是,这似乎使任何一行中断消失,所有的链接消失,一个图像的内容,现在只是没有出现在所有。

    解码前的原始内容如下:

    <p>
      <img
        src="https://img.aws.livestrongcdn.com/ls-article-image-673/s3-us-west-1.amazonaws.com/contentlab.studiod/getty/a6e0848c23aa4d46820e944e24c4b7f2.jpg"
        alt="Your dog wants to help when you're upset, and here's proof"
      />
    </p>
    <section class="subsection article__section__step article_module_section">
      <p class="article-section__content" data-dmc="section">
        Can dogs understand when we are distressed and respond accordingly?
        According to new research, man&rsquo;s best friend not only notices when
        you (or other humans) are upset, but will actually adapt their behavior as
        a result. What a good boy!
      </p>
      <p class="article-section__content" data-dmc="section">
        The study, published in the journal&nbsp;
        <a
          class="markdown-anchor"
          href="https://link.springer.com/article/10.3758%2Fs13420-018-0332-3"
          target="_blank"
          rel="nofollow noopener"
        >
          Learning &amp; Behavior
        </a>
        , found that canines were faster to respond to humans who sounded upset
        versus humans who sounded calm.
      </p>
      <p class="article-section__content" data-dmc="section">
        &ldquo;It&rsquo;s really cool for us to know that dogs are so sensitive to
        human emotional states,&rdquo; Emily Sanford, a graduate student in
        psychological and brain sciences at Johns Hopkins University and co-author
        of the study, explained to&nbsp;
      </p>
    </section>
    

    在到达客户端之前,有没有办法在节点端执行此操作?

    2 回复  |  直到 6 年前
        1
  •  1
  •   Dat Tran    6 年前

    你只需要把它放进危险的莱西汀HTML道具中:

    <div dangerouslySetInnerHTML={{__html: this.props.title}}/>
    <div dangerouslySetInnerHTML={{__html: this.props.content}}/>
    

    然而,这将是危险的,因为你的网站将面临XSS脆弱或诸如此类。所以首先要确保你的内容是安全的。我建议使用 sanitize-html 只允许某些标记和属性。

    const cleanTitle = sanitizeHtml(this.props.title, {
      allowedTags: [ 'b', 'i', 'em', 'strong', 'a' ],
      allowedAttributes: {
        'a': [ 'href' ]
      },
      allowedIframeHostnames: ['www.youtube.com']
    });
    

    https://github.com/punkave/sanitize-html

        2
  •  1
  •   Tholle    6 年前

    你可以用 dangerouslySetInnerHTML 从字符串呈现HTML。

    例子

    const content = `
    <p>
      <img
        src="https://img.aws.livestrongcdn.com/ls-article-image-673/s3-us-west-1.amazonaws.com/contentlab.studiod/getty/a6e0848c23aa4d46820e944e24c4b7f2.jpg"
        alt="Your dog wants to help when you're upset, and here's proof"
      />
    </p>
    <section class="subsection article__section__step article_module_section">
      <p class="article-section__content" data-dmc="section">
        Can dogs understand when we are distressed and respond accordingly?
        According to new research, man&rsquo;s best friend not only notices when
        you (or other humans) are upset, but will actually adapt their behavior as
        a result. What a good boy!
      </p>
      <p class="article-section__content" data-dmc="section">
        The study, published in the journal&nbsp;
        <a
          class="markdown-anchor"
          href="https://link.springer.com/article/10.3758%2Fs13420-018-0332-3"
          target="_blank"
          rel="nofollow noopener"
        >
          Learning &amp; Behavior
        </a>
        , found that canines were faster to respond to humans who sounded upset
        versus humans who sounded calm.
      </p>
      <p class="article-section__content" data-dmc="section">
        &ldquo;It&rsquo;s really cool for us to know that dogs are so sensitive to
        human emotional states,&rdquo; Emily Sanford, a graduate student in
        psychological and brain sciences at Johns Hopkins University and co-author
        of the study, explained to&nbsp;
      </p>
    </section>
    `
    
    function App() {
      return (
        <div dangerouslySetInnerHTML={{ __html: content}} />
      );
    }
    
    ReactDOM.render(<App />, document.getElementById("root"));
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
    
    <div id="root"></div>