A library that can let you use iframe in markdown extra syntax securely! This is the version for getting script from CDN

If you want to use it with webpack, plz use toml2iframe instead!

简体中文 | English

In the Demo, You can experience how it works!

Add script from CDN

<script src="https://cdn.jsdelivr.net/npm/codeblock-iframe@latest/dist/index.min.js"></script>

Use the functions from this library via the global variable __codeblock_iframe

// iframe attributes
const content = `
src="www.baidu.com"
width="100%"
height="500"
`
const converter_result = window.__codeblock_iframe.converter(content)
const filter_result = window.__codeblock_iframe.filter(content, ["www.baidu.com", "www.google.com"])

console.log(converter_result)
// output: [
//  '<iframe src="www.baidu.com" width="100%" height="500"></iframe>',
//  true,
//  [ 'src', 'width', 'height' ]
//]

console.log(filter_result)
// output: [ true, 'www.baidu.com' ]

Following formats of src are supported!

www.baidu.com
//www.baidu.com
http://www.baidu.com
https://www.baidu.com

• iframe Attributes

• Params

• Functions

1. converter(content: string, filters?: Array<string>): for convertering attributes to iframe
2. filter(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 use www.baidu.com directly! If you want to use same origin page, plz don't input the filters param, you will get nothing for converter function!!! Or, you give the complete path for src and add your same origin page's domain to filters param, it will work!!

To be honest, Markdown supports HTML tags natively! But here are some issues we have to face as followed:

1. 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?
2. 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.