Next.js DOMPurify.sanitize() 显示 TypeError: dompurify__WEBPACK_IMPORTED_MODULE_6___default.a.sanitize is not a function

Question

我使用DOMPurify.sanitize()insidedangerouslySetInnerHTML={{}}来显示innerHtml从数据库返回的。出于最初的目的，我在此页面上使用getServersideProps()with next-redux-wrapper。

我安装了 dompurify: npm i -S dompurify，当前版本是：“^2.2.6”。

我的代码：

    import DOMPurify from 'dompurify';
    import { useSelector } from 'react-redux';
    import { END } from 'redux-saga';
    import wrapper from '../redux/storeSetup';

    const EmployeePage = () => {
    
        const blog = useSelector(state => state.data);

        const html_body = blog[0].body_html;
    
        const clean = DOMPurify.sanitize(html_body);
    
        return(
           <div className="mainContainer">
                <div dangerouslySetInnerHTML ={{ __html: clean }} />
                <ul>
                    {blog.map((item) => (
                        <li key={item.author}>
                            <span>{item.author}</span><br/>
                            <span>{item.title}</span>
                            <h4>{item.body_delta}</h4>
                            <p>{item.body_html}</p>
                            <p>{item.created_on}</p>
                        </li>
                    ))}
                </ul>
            </div>
        );
    }

    export const getServerSideProps = wrapper.getServerSideProps( async ({store}) => {
        store.dispatch({type: GET_DATA});
        store.dispatch(END);
        await store.sagaTask.toPromise();    
    });
    export default EmployeePage;

但是，当我与运行此npm run dev我得到这个错误： TypeError: dompurify__WEBPACK_IMPORTED_MODULE_1___default.a.sanitize is not a function。

这里有什么问题？我尝试使用更简单的代码，但一切都显示相同的错误！我究竟做错了什么？

Answer 1

使用同构 dompurify

它可以在服务器端和浏览器上渲染

Answer 2

我只是切换到js-xss并制作了一个这样的组件：

import React from "react";
import xss from "xss";

const Html = ({ unsafeHtml }: {unsafeHtml: string}): JSX.Element => {
  return (
    <div
      {...props}
      dangerouslySetInnerHTML={{
        __html: xss(unsafeHtml),
      }}
    />
  );
};

Answer 3

据此： https: //github.com/cure53/DOMPurify/issues/29#issuecomment-466626162

尝试以下操作（来自上面的示例）：

import { JSDOM } from 'jsdom'
import DOMPurify from 'dompurify'
const { window } = new JSDOM(html_body);
const domPurify = DOMPurify(window);
console.log(domPurify.sanitize(html_body));