@citcfe/xss-protection v0.1.0

xss-protection

示例 demo

XSS 防护

React 已经做了 XSS 防御，但不代表完全防御。我们在日常的开发中，依然需要注意以下事项，并按照代码示例将过去的项目的代码做好 XSS 防御。

注意事项（重要）

• 禁止使用 dangerouslysetinnerhtml、innerhtml、html()等直接在 DOM 插入 html 的写法，如场景必须使用，请与我联系
• 禁止将 src、href 等属性的值禁止拼接用户输入的字段
• 禁止使用 onload、onerror、onclick 等 on 标签事件
• 在 style 标签内部，避免包含 expression(...)
• 富文本输入输出时，切记使用 xss 包进行编码转义
• 如有 iframe 需求，请与我联系
• a 标签增加 rel 属性 rel="noopener noreferrer nofollow"
• window.open 操作需置空 opener
• 任何标签下的 href、src 属性都需要过滤

代码示例

• 项目中安装 xss-protection 包

npm install @citcfe/xss-protection --save

• 代码中使用

import * as React from "react";

import * as ReactDOM from "react-dom";

import Welcome from "../components/Welcome";

import { xssProtection, openUrl } from "@citcfe/xss-protection";

import "./app.scss";

const url = `javascript:alert('xss')`;

const url1 = `https://www.baidu.com`;

const url2 = `<script>alert('xss')</script>`;

ReactDOM.render(
  <div className="App">
    <Welcome message="Hello World!" />
    <a href={xssProtection(url)} rel="noopener noreferrer nofollow">
      测试
    </a>
    <br />
    <a href={xssProtection(url1)} rel="noopener noreferrer nofollow">
      测试1
    </a>
    <br />
    <a href={xssProtection(url2)} rel="noopener noreferrer nofollow">
      测试2
    </a>
    <br />
    <img src={xssProtection(url2)} />
    <br />
    <a
      onClick={() => {
        openUrl("http://www.baidu.com");
      }}
    >
      click跳转
    </a>
  </div>,
  document.getElementById("app") as HTMLElement
);

• 输出结果

<div class="App">
    <div class="welcome-container">
        <p>Hello World!</p>
    </div>
    <a href="#" rel="noopener noreferrer nofollow">测试</a>
    <br>
    <a href="https://www.baidu.com" rel="noopener noreferrer nofollow">测试1</a>
    <br>
    <a href="&amp;lt;script&amp;gt;alert('xss')&amp;lt;/script&amp;gt;" rel="noopener noreferrer nofollow">测试2</a>
    <br>
    <img src="&amp;lt;script&amp;gt;alert('xss')&amp;lt;/script&amp;gt;">
    <br>
    <a>click跳转</a>
</div>