Question

Tumblr在某种意义上令人印象深刻，它允许用户自定义他们的个人资料等。您可以编辑个人资料的HTML和CSS。

这是我想要应用于我自己的网站的东西。但是，我确信这对安全性来说是一个很大的负担。

有没有人对Tumblr这样的功能有任何提示或预防措施？另外，建议将可编辑的HTML和CSS存储在数据库中吗？谢谢：D

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

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，那么对于数据库问题，您可以使用mini 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>

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

2 个答案:

实施例