一个可以让你通过markdown拓展语法更加安全使用iframe元素的库
如果你想直接在HTML中通过script标签引入, 请使用 codeblock-iframe 这个库
在这个 Demo 里, 你可以体验这种转化方式!
npm i toml2iframe
# 如果使用yarn
yarn add toml2iframe你可以在markdown编辑器里面写下面的内容
```iframe
src="www.baidu.com"
width="100%"
height="500"
```为上面的语法自定义渲染器
import { filter, converter } from "toml2iframe"
// iframe attributes
const content = `
src="www.baidu.com"
width="100%"
height="500"
`
console.log(filter(content, ["www.baidu.com", "www.google.com"]))
// output: [ true, 'www.baidu.com' ]
console.log(converter(content))
// output: [
// '<iframe src="www.baidu.com" width="100%" height="500"></iframe>',
// true,
// [ 'src', 'width', 'height' ]
//]src符合下面的格式才会被支持
www.baidu.com
//www.baidu.com
http://www.baidu.com
https://www.baidu.com
- iframe属性
| 属性名 |
|---|
| src |
| height |
| width |
| align |
| frameborder |
| longdesc |
| marginheight |
| marginwidth |
| name |
| sandbox |
| scrolling |
| seamless |
| srcdoc |
| textContent |
- 参数
| 参数 | 类型 | 说明 |
|---|---|---|
| content | string |
iframe标签的属性 (子组件使用textContent), 使用标准TOML语法书写 |
| filters | Array<string> |
允许的域名列表 (在filter函数中这个参数需要传入不要写协议，直接写域名就好了) |
- 函数
converter(content: string, filters?: Array<string>): 转化iframe的属性到iframe标签元素filter(content: string, filters: Array<string>): 过滤域名
- 输出
For converter(content: string, filters?: Array<string>): [ 结果, 是否过了过滤, [ 属性的名称 (给debug用的) ] ]
For filter(content: string, filters: Array<string>): [ 是否过了过滤, 域名 (如果src的值不是合法路径, 会返回输入src的值) ]
/www.baidu.com不是合法路径, 直接使用www.baidu.com! 如果你想使用同源页面, 不要传filters这个参数, 不然在converter函数你拿不到结果!!! 或者, 你写src的时候写全同源页面完整的路径, 并且把你同源页面的路由传到filters参数里面去, 这就可以了!!
讲道理, Markdown原生就支持HTML! 但是下面场景我们会遇到一些问题:
- 如果我不想让我的用户通过iframe给我们的网站插入广告, 但是我们支持他们用codepen来分享自己的代码, 咋办?
- 有时候我们想在一些markdown编辑器中插入iframe。为了即时渲染, 浏览器会在我们输入的时候发送大量的GET请求给我们的目标网站, 我们如何去做优化？甚至于当我们开发的时候开启SSR渲染页面, 可能会导致页面崩溃
代码块渲染对我们拓展markdown原生语法非常简单, 所以我们可以通过上面的策略来限制iframe渲染的频率
- iarna-toml: Better TOML parsing and stringifying all in that familiar JSON interface.