可以在虎绿林使用html标签了（html会放进沙箱化iframe里）

新增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代码

内容高度

因为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代码

如果想同时指定宽度和高度，就是这样（高度和宽度用逗号分隔）：

[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代码

同源策略

嵌入的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]

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]

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代码高亮：
&#96;&#96;&#96;
test
&#96;&#96;&#96;
一段UBB代码高亮：
&#91;code]test&#91;/code]
代码高亮结束
</pre>
[/html]

HTML代码