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

Question

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

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

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

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

Answer 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 规则没有应用；它就在代码中！”）

Answer 2

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

一、api.php文件，（网址位置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>