HTML和JS相关问题记录

背景图片路径问题

使用编辑器上传文件，存入数据库的路径很多时候像这样:

20180820\6cbb383c55a6078fdf4f2be34fcbf61b.png

在h5的img中直接使用这些路径，没有问题。但是当作为背景图片时，反斜杠\就会导致图片不能显示。

style="background-image:url('/uploads/img/20180820\111.png'});"

这时候需要把反斜杠‘\’替换为‘/’

输入过滤问题

• 我们有一个用户的输入字符：$str = “<span class=“ddf”>抽检通过</span><script>alert(‘666’);</script>”;
• 对于用户提交的文本内容，我们在插入数据库是要通过sql注入过滤。
  sql注入过滤一般使用htmlspecialchars，在数据插入数据库前把字符串中的html标签和符号转换为实体，转化后如下：

<span class="ddf">抽检通过</span><script>alert('666');</script>

• 然后把该字符串保存到数据库。该字符串读取到html页面时，会原样输出html标签和符号。

• 当该字符串是由富文本框提交而来时，说明html标签中的样式是需要执行的，此时再原样输出到页面时，就不能正确的展示文本的样式。我们可以使用htmlspecialchars_decode把字符串中的html实体符号还原回html标签。

• 但是这样的话，js标签也被还原了，此时字符串输出到html时，js代码会被执行，造成xss攻击。这个时候我们需要再次处理字符串，把字符串中的script标签转换为实体字符，来避免可能的xss攻击。当前端只需过滤xss时，可直接把字符串中的js代码删除掉。在yii2中可使用\yii\helpers\HtmlPurifier::process($str)，把js代码过滤掉。

html代码页面拷贝问题

问题描述

在页面中，我们需要拷贝一个表单时，可以通过outerhtml获取表单的的html。但是当我们在页面输入修改表单的值后，再复制表单，发现拷贝的表单中的值还是原始值。

问题原因

这是因为我们在页面输入和修改表单值后，只是修改了内存中表单对应的值，并没有改变页面中表单的html代码。要修改元素对应的html，可以使用js的setAttribute(‘属性名’,‘属性值’)方法

解决方法

var clone_obj = '要复制的元素对象';

$("input,textarea,button", clone_obj).each(function () {
    this.setAttribute('value', this.value);
 });
$(":radio,:checkbox", clone_obj).each(function () {
    // im not really even sure you need to do this for "checked"
    // but what the heck, better safe than sorry
    if (this.checked) this.setAttribute('checked', 'checked');
    else this.removeAttribute('checked');
});

$("option", clone_obj).each(function () {
    if (this.selected) this.setAttribute('selected', 'selected');
    else this.removeAttribute('selected');
});

var add_html = clone_obj.prop('outerHTML');

注意
复制时，select表单的name要设置为不重复的值