当您允许用户在您的网站上编辑 HTML 和 CSS 时，您应该采取哪些预防措施？答案

【问题标题】：What are precautions you should take when you allow users to edit HTML and CSS on your website?当您允许用户在您的网站上编辑 HTML 和 CSS 时，您应该采取哪些预防措施？
【发布时间】：2023-03-29 14:30:01
【问题描述】：

Tumblr 确实令人印象深刻，因为它允许用户自定义他们的个人资料等。您可以编辑个人资料的 HTML 和 CSS。

这是我想应用于我自己的网站的东西。但是，我确信这将对安全造成很大的负担。

对于 Tumblr 之类的功能，是否有人有任何提示或注意事项？此外，是否建议将可编辑的 HTML 和 CSS 存储在数据库中？谢谢 :D

附：服务器端脚本呢？假设我想授予允许用户编写对数据库执行某些操作的按钮的脚本的选项。关于如何做到这一点的任何想法？

【问题讨论】：

标签： html css customization security

【解决方案1】：

根据我的经验，如果您希望用户能够完全使用 HTML/CSS，这非常很难做到。但是，您可以做的是去除所有 CSS 和 HTML 属性，只将“安全”代码放在白名单中。

示例

<p>This is legal code.</p>

<p><a onload="alert('XSS!')">The attribute should be filtered out</a></p>

<p><a href="http://google.com/" class="blue">This is a legal link.</a>
Of course you should still sanitize the href attribute!</p>

<h1>This is bad, because the rest of the page is going to huge,
so make sure there's a closing tag

<style>
.blue {
    color: #00f; // keep this (by whitelist)
    strange-css-rule: possibly-dangerous; // Filter this out!
}
</style>

不过，这些只是您可能遇到的一些陷阱。

我不熟悉 Tumblr，但我很确定他们正在做类似的事情。

至于数据库问题，当然可以将 HTML 和 CSS 存储在数据库中，很多系统都是这样做的。在您的情况下，无论如何您只需要一种表示形式，其他任何东西都会让用户感到困惑（“为什么我的 CSS 规则没有应用；它就在代码中！”）

【讨论】：

服务器端脚本呢？假设我想授予允许用户编写对数据库执行某些操作的按钮的脚本的选项。关于如何做到这一点的任何想法？
这在很大程度上取决于您的用例，因此您可能应该问另一个问题。在任何情况下，我都不允许用户插入自定义 PHP/Ruby/what-have-you 代码。滥用的可能性太大。

【解决方案2】：

如果您使用php，那么对于数据库问题，您可以使用迷你 API 系统。例如，您希望用户允许对某事发表评论并将其保存在您的数据库中，那么您可以使用这样的 API。

首先，api.php 文件，（URL 位置：http://yoursite.com/api.php）

<?php

// ID and Key can be different for all users.
// id = 1234
// key = 'secret_key'

// function = name of the function, user can call
// option = parameter passed to the function

// Now check if id, key, function and option are requested and then
// call function if it exists.

if(isset($_GET['id'], $_GET['key'], $_GET['function'], $_GET['option']) {
   $id = $_GET['id'];
   $key = $_GET['key'];

   if($id == '1234' && $key == 'secret_key') {

       // define all functions here
       function make_comment($option) {
           ...code for saving comment to database...
       }

       if(function_exists($_GET['function'])) {
           $_GET['function']($_GET['option']);
       }
   }
}

?>

然后 uesr 可以使用简单的 API 调用从任何按钮调用此函数，例如

<a href='http://yoursite.com/api.php?id=1234&key=secret_key&function=make_comment&option=i_am_comment'></a>

【讨论】：