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

@Ta 2021-09-17发布,2021-09-22修改 15105点击

新增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中的,所以必须为内容指定高度,默认高度为150px,不足以完整显示演示内容,所以会出现滚动条。

改成这样就可以,300是内容的高度:

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

图片.png

它的原理是:如果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代码

回复列表(24)
添加新回复
回复需要登录