Question

在第一个示例中，脚本已执行，但在第二个示例中没有，Dom结果是相同的。

// executable
var c = 'alert("append a div in which there is a script element")';
var div = document.createElement('div');
var script_2 = document.createElement('script');
script_2.textContent = c;
div.appendChild(script_2);
document.body.appendChild(div);

// unexecutable although the dom result is same as above case
var d = '<script>alert("append a div that has script tag as innerHTML")';
var div_d = document.createElement('div');
div_d.innerHTML = d;
document.body.appendChild(div_d);

Answer 1

<android.support.design.widget.TextInputLayout android:id="@+id/text_input_layout_newpass" app:errorTextAppearance="@style/MyAppTheme.TextInputLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="5dp" app:passwordToggleEnabled="true" android:hint="New PassWord"> <android.support.design.widget.TextInputEditText android:id="@+id/newpass" android:inputType="textPassword" android:textColor="#000" android:layout_width="match_parent" android:layout_height="wrap_content" /> </android.support.design.widget.TextInputLayout>可让您在一次轻松的通话中添加尽可能多的HTML。

.innerHTML允许您添加单个元素（如果附加DocumentFragment，则为多个元素）。

如果您使用.appendChild，则需要正确包含开始和结束标记。你的HTML必须正确。

使用.innerHTML创建的元素会自动生成相应的开始和结束标记。

document.createElement的示例未正确形成。而不是：

.innerHTML

它应该是：

var d = '<script>alert("append a div that has script tag as innerHTML")';

<强>更新

有趣!!

我知道，在过去，你的第二个例子会起作用。但似乎可能出于安全原因，浏览器不再允许您通过var d = '<script>alert("append a div that has script tag as innerHTML")</script>';插入<script>。

我在Chrome 62上试过但它失败了。 Firefox 57失败，Safari 11.0.2失败。

我最好的猜测是这是安全更新。

看这里： https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

然后转到安全注意事项部分。

内容如下：

看到用于在网页中插入文本的innerHTML并不罕见。这带来了安全风险。

.innerHTML

虽然这可能看起来像是跨站点脚本攻击，但结果是无害的。 HTML5指定不应执行通过innerHTML插入的标记。

附加子元素和设置innerHTML之间的区别是什么

1 个答案: