60 lines
1.3 KiB
Markdown
60 lines
1.3 KiB
Markdown
|
---
|
|||
|
|
title: HTML Dom Innerhtml Property
|
|||
|
|
localeTitle: HTML Dom Innerhtml属性
|
|||
|
|
---
|
|||
|
|
## HTML Dom Innerhtml属性
|
|||
|
|
|
|||
|
|
`innerHTML` prop返回所选元素中的HTML内容，并允许您定义新的HTML内容。
|
|||
|
|
|
|||
|
|
**_获取元素内容_**
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
|
|||
|
|
<div id="demo">
|
|||
|
|
<p>Demo</p>
|
|||
|
|
</div>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
var element = document.getElementById("demo");
|
|||
|
|
console.log(element.innerHTML) //logs <p>Demo</p>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**_设置元素内容_**
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
|
|||
|
|
<div id="demo"></div>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
var element = document.getElementById("demo");
|
|||
|
|
element.innerHTML = "<div>Demo</div>";
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
HTML现在就像
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
|
|||
|
|
<div id="demo">
|
|||
|
|
<div>Demo</div>
|
|||
|
|
</div>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**_安全考虑_**
|
|||
|
|
|
|||
|
|
设置为`innerHTML`的值应该来自可靠来源，因为Javascript会将任何内容放在该元素中，并且它将作为纯HTML运行。
|
|||
|
|
|
|||
|
|
例：
|
|||
|
|
|
|||
|
|
设置“ `<script>alert();</script>` ”值将导致Javascript“alert（）”函数被触发：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
var element = document.getElementById("demo");
|
|||
|
|
|
|||
|
|
element.innerHTML = "<script>alert();</script>";
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
这种类型的攻击称为[Cross Site Scripting，简称XSS](https://en.wikipedia.org/wiki/Cross-site_scripting) 。
|
|||
|
|
|
|||
|
|
这是提交XSS攻击的最常见方式之一。如果您想学习更多知识并学会防范它， [请查看此资源](https://xss-game.appspot.com/)
|