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/)
|