A library that can let you use iframe in markdown extra syntax securely!
If you want to use this library in HTML via script tag, plz use codeblock-iframe instead
In the Demo, You can experience how it works!
npm i toml2iframe
# or if u use yarn
yarn add toml2iframe
You can write in markdown editor as followed:
```iframe
src="www.baidu.com"
width="100%"
height="500"
```
Write your own renderer for this
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' ]
//]
Following formats of src
are supported!
www.baidu.com
//www.baidu.com
http://www.baidu.com
https://www.baidu.com
- iframe Attributes
Attributes |
---|
src |
height |
width |
align |
frameborder |
longdesc |
marginheight |
marginwidth |
name |
sandbox |
scrolling |
seamless |
srcdoc |
textContent |
- Params
Param | Type | Description |
---|---|---|
content | string |
Iframe's attributes (including textContent for children) using standard TOML syntax |
filters | Array<string> |
Allowed domain list (required in filter function, DO NOT WITH Protocol) |
- Functions
converter(content: string, filters?: Array<string>)
: for convertering attributes to iframefilter(content: string, filters: Array<string>)
: for filtering domains
- Outputs
For converter(content: string, filters?: Array<string>)
: [ result, if passed filter?, [ attributes' names for debug ] ]
For filter(content: string, filters: Array<string>)
: [ if passed filter?, domain (if src's value is not the valid uri, return raw src's value) ]
/www.baidu.com
is not the valid uri, plz usewww.baidu.com
directly! If you want to use same origin page, plz don't input thefilters
param, you will get nothing forconverter
function!!! Or, you give the complete path forsrc
and add your same origin page's domain tofilters
param, it will work!!
To be honest, Markdown supports HTML tags natively! But here are some issues we have to face as followed:
- If I didn't want my users insert ads in their posts via iframe but supported them using codepen to share their codes, how could I do?
- Sometimes we try to insert iframe in some markdown editor. For immediately rendering, the browser will send a lot of GET requests to our target website when we inputting, how could we optimize? Even it causes our page breakdown when developing and using SSR
Code Block Renderer is easy for us to extend native markdown syntax, so we can limit the frequency of iframe rendering in this way.
- iarna-toml: Better TOML parsing and stringifying all in that familiar JSON interface.