标题: 可以在虎绿林使用html标签了（html会放进沙箱化iframe里）
时间: 2021-09-17发布，2023-04-08修改
新增UBB：
[html]任意HTML代码[/html]
[html=内容高度]任意HTML代码[/html]
[html=内容宽度,内容高度]任意HTML代码[/html]
注意：不必把<iframe>放入[html]标签中。
你可以直接使用<iframe>标签，不必把它放进[html][/html]。
[html][/html]UBB是用<iframe>标签实现的，如果你把<iframe>标签放进[html][/html]里，就会套上两层<iframe>，可能达不到你想要的显示效果，而且也会影响页面性能。
虎绿林对iframe标签的支持详见：https://hu60.cn/q.php/bbs.topic.101478.html
正是对iframe标签安全性的深入研究，才为我们带来了[html]UBB。
演示：
[html]
<div class="topic-anchor">
<a href="user.info.1.html">
<img src="https://file.hu60.cn/avatar/1.jpg?r=1628117593" class="avatar" />
</a>
<a href="user.info.1.html">老虎会游泳</a>
</div>
[/html]
点击“HTML代码”链接可以看到用户使用的代码，修改编辑框中的代码后再点击“HTML代码”，就可以看到修改后的效果。
内容高度
因为html是作为srcdoc属性（MDN）嵌入在沙箱化iframe中的，所以必须为内容指定高度，默认高度为300px，如果不足以完整显示演示内容，就会出现滚动条；如果内容太少，就会有大片空白。
如果要设置高度，可以这样写（200是设置的高度）：
[html=200]
<div class="topic-anchor">
<a href="user.info.1.html">
<img src="https://file.hu60.cn/avatar/1.jpg?r=1628117593" class="avatar" />
</a>
<a href="user.info.1.html">老虎会游泳</a>
</div>
[/html]
如果想同时指定宽度和高度，就是这样（高度和宽度用逗号分隔）：
[html=640,300]
<div class="topic-anchor">
<a href="user.info.1.html">
<img src="https://file.hu60.cn/avatar/1.jpg?r=1628117593" class="avatar" />
</a>
<a href="user.info.1.html">老虎会游泳</a>
</div>
[/html]
同源策略
嵌入的HTML与虎绿林不同源，所以以下XHR请求会失败，这保证了嵌入HTML无法用于CSRF攻击。
[html=60]
<div id="result"></div>
<script src="/tpl/jhin/js/jquery-3.1.1.min.js"></script>
<script>
var f = async function () {
try {
console.log("hello");
var r = await $.get("https://hu60.cn/q.php/index.index.json");
console.log('成功', r);
document.getElementById('result').innerText = '成功: '+JSON.stringify(r);
} catch (ex) {
console.log('失败', ex);
document.getElementById('result').innerText = '失败: '+JSON.stringify(ex);
}
};
f();
</script>
[/html]
它的原理是：如果iframe指定了sandbox属性，并且里面不包含allow-same-origin，那么iframe生成的页面就被认为和父页面不同源。
但是以下代码会成功，因为_origin=*参数让虎绿林发送了一个Access-Control-Allow-Origin: *头信息。不过这样依然可以保证安全，因为此时虎绿林不会接受Cookie，请求必须自行传递sid才能处于登陆状态（详见虎绿林API手册）。
[html=60]
<div id="result"></div>
<script src="/tpl/jhin/js/jquery-3.1.1.min.js"></script>
<script>
var f = async function () {
try {
console.log("hello");
var r = await $.get("https://hu60.cn/q.php/index.index.json?_origin=*");
console.log('成功', r);
document.getElementById('result').innerText = '成功: '+JSON.stringify(r);
} catch (ex) {
console.log('失败', ex);
document.getElementById('result').innerText = '失败: '+JSON.stringify(ex);
}
};
f();
</script>
[/html]
标签优先级
markdown块级代码标记具有最高优先级，[code]标记具有第二优先级，[html]标记具有第三优先级。
如果高优先级标记出现在低优先级标记内部，UBB解析会出问题，达不到预期显示目的。比如以下UBB标记[html]不会生效：
[html]
<pre>
一段markdown代码高亮：
```
test
```
一段UBB代码高亮：
[code]test[/code]
代码高亮结束
</pre>
[/html]
效果：
[html]
<pre>
一段markdown代码高亮：
test
一段UBB代码高亮：
test代码高亮结束
</pre>
[/html]
为了正常显示，必须对反引号和中括号进行html实体编码：
[html]
<pre>
一段markdown代码高亮：
```
test
```
一段UBB代码高亮：
[code]test[/code]
代码高亮结束
</pre>
[/html]
