昨天突然想到了一个图片可以使用base64资源，为什么iframe不可以呢？
然后就试了试，结果可以。
代码大概是这样：
<!DOCTYPE HTML>
<html>
<body>
<div id='div'>
<iframe src="data:text/html;base64,5L2g5aW977yM5LiW55WM" frameborder="0"></iframe>
</div>
</body>
</html>
为什么编码不正确，寻找解决方案加上
charset=UTF-8。
<!DOCTYPE HTML>
<html>
<body>
<div id='div'>
<iframe src="data:text/html;charset=UTF-8;base64,5L2g5aW977yM5LiW55WM" frameborder="0"></iframe>
</div>
</body>
</html>
好了文章结束了，理论上可以通过这种方法实现HTML加密？ no，不可以，因为浏览器会解密，随后尝试通过影子dom隐藏结构，我发现不可以（也不是我发现，是我之前没有看）。
<!DOCTYPE HTML>
<html>
<body>
<div id='div'>
<iframe src="data:text/html;charset=UTF-8;base64,5L2g5aW977yM5LiW55WM" frameborder="0"></iframe>
<show-iframe />
</div>
</body>
<script>
customElements.define('show-iframe', class extends HTMLElement {
connectedCallback() {
const shadow = this.attachShadow({mode: 'open'});
shadow.innerHTML = `<iframe src="data:text/html;charset=UTF-8;base64,5L2g5aW977yM5LiW55WM" frameborder="0"></iframe>`;
}
});
</script>
</html>
然后进行了一系列考虑，第二天进行的整理，如上内容是昨天思考的。
img使用base64资源并不是使用了base64资源而是使用Data URL, 不只是img 可以使用iframe也可使用，link也可以，地址栏都可以直接打开data url。
data url 结构如下：
data:[<mediatype>][;base64],<data>
其中data是固定前缀，用来表明是data url(猜测)。
<mediatype>是一个Internet媒体类型规范（带有可选参数。），如果不携带<mediatype>那就说明<mediatype>为默认值text/plain；charset=US-ASCII，text/plain可以省略，但是需要提供编码类型。
base64是说明编码是base64编码，如果不携带base64就说明数据（作为八位字节）使用ASCII编码。
当然URL方案仅对短值有用。并且需要注意一些使用url的应用程序可能会施加长度限制。
而且 base64 并不是加密方法，通过base64可以轻易的解密，而且data url 需要上写明媒体类型规范等内容，相当于你加密了但是告诉别人如何加密的。
参考：
