正在添加这个“代码游乐场”我的 WordPress 网站存在安全风险吗？

Question

因此，我打算将这种“代码游乐场”的交互式代码片段演示添加到我的网站上的一些教程中。

我想知道这里是否有安全风险。

代码字段是可编辑的。

显然，人们可以轻松注入JavaScript。

但是，这与我们从控制台选项卡中注入JS时有什么不同吗？这里有任何安全问题吗？

感谢您对此的任何帮助。

PS。您可以在下面运行代码段，也可以在此处查看Codepen： https：//codepen.io/elementhow/笔/Dyjkyob

let examples = document.querySelectorAll(".prog-example");

examples.forEach((example, i, arr) => {
   let pres = example.querySelectorAll(".examples pre");
   if (pres.length < 1) document.querySelector('.examples').remove();
   let htmlOfPreview = example.querySelector(".preview-parent pre");
   let preview = example.querySelector(".preview");
   htmlOfPreview.innerHTML = escapeHTML(preview.innerHTML);
   htmlOfPreview.addEventListener('input',function(){
      preview.innerHTML = htmlOfPreview.textContent;
   });

   let CSSdiv = document.createElement("style");
   document.getElementsByTagName("head")[0].appendChild(CSSdiv);
   pres.forEach((pre, i, arr) => {
      pre.addEventListener("click", function () {
         arr.forEach((e) => e.classList.remove("label-active"));
         pre.classList.add("label-active");
         CSSdiv.innerHTML = pre.textContent;
      });
      pre.setAttribute('contenteditable',"");
      if (pre.hasAttribute("contenteditable")){
         pre.addEventListener('input', function(){
         CSSdiv.innerHTML = pre.textContent;
      });
      }
   });
   if (pres[0]) pres[0].click();
});

function escapeHTML(html) {
   return document.createElement("div").appendChild(document.createTextNode(html)).parentNode.innerHTML;
}

*, *::after {
   box-sizing: border-box;
}
.prog-example {
   display: flex;
   width: 100%;
   background:#cecece;
}
.prog-example .examples {
   max-height: 440px;
   overflow-y: auto;
   padding: 0 10px;
   background-color:#eee8ab;
   min-width:170px;
   position:relative;
}

.prog-example .preview-parent {
   margin: 10px;
   display: flex;
   flex-direction: column;
   flex-grow: 1;
}
.prog-example .examples pre {
   font-size: 12px;
   padding: 6px;
   border: 1px solid #999;
   margin: 14px 0;
   border-radius: 8px;
   cursor: pointer;
   background-color:#fff;
   min-width:170px;
}
.prog-example .examples pre[contenteditable]{
       /* cursor: text; */
}
.prog-example .examples pre.label-active {
   outline: 2px solid #333;
}
.prog-example .preview-parent pre {
   background-color: #eee;
   margin: 0 0 10px;
   padding: 0 10px;
   position:relative;
}
.prog-example .preview-parent .preview {
   border: 1px solid #999;
   flex-grow: 1;
   position:relative;
   min-height:130px;
   background-color:#fff;
}
.prog-example .preview-parent > pre::after,.prog-example .preview-parent .preview::after,  .prog-example .examples::after {
   content:'HTML';
   position:absolute;
   background-color:#777;
   font-family:monospace;
   font-size:13px;
   color:#fff;
   padding:4px;
    border-bottom-left-radius:6px;
   top:0;
   right:0;
}
.prog-example .preview-parent .preview::after {
   content:'PREVIEW';
}
.prog-example .examples::after {
   content:'CSS';
}

/* scroll bar if there is overflow */
.prog-example .examples::-webkit-scrollbar-track {
   background-color: #f4f4f4;
}
.prog-example .examples::-webkit-scrollbar {
   width: 6px;
   background-color: #f4f4f4;
}
.prog-example .examples::-webkit-scrollbar-thumb {
   background-color: #00000044;
}

<div class="prog-example">
   <div class="examples">
      <pre>
.test-button{
   font-size:16px;
}</pre>
      <pre>
.test-button{
   font-size:21px;
}      </pre>
      <pre>
.test-button{
   font-size:44px;
}      </pre>
      <pre>
.test-button{
   font-size:16px;
}</pre>
      <pre>
.test-button{
   font-size:21px;
}      </pre>
      <pre>
.test-button{
   font-size:44px;
}      </pre>
      <pre>
.test-button{
   font-size:16px;
}</pre>
      <pre>
.test-button{
   font-size:21px;
}      </pre>
      <pre>
.test-button{
   font-size:44px;
}      </pre>
      <pre>
.test-button{
   font-size:16px;
}</pre>
      <pre>
.test-button{
   font-size:21px;
}      </pre>
      <pre contenteditable>
.test-button{
   font-size:44px;
}      </pre>
      </div>
   <div class="preview-parent">
      <pre contenteditable></pre>
      <div class="preview">
<div class="wrapper">
<button class='test-button'>click me</button>
</div>
         </div>
   </div>
   </div>

Answer 1

简短的回答：只要没有可以向服务器发送 http 请求的输入，它都是客户端且安全的。

长篇：

在 HTTP 世界中，对于攻击面，您需要一个“输入字段”（不是 UI 元素），您可以在其中发送一些将由服务器解析的数据。这是通过 http 请求完成的，您可以在标头和正文中放入一些数据，将它们发送到服务器，然后期望服务器得到某种响应。如果您没有创建服务器可接受的数据形式的策略，则可能会注入使服务器的行为与业务逻辑不同的代码。

在您的情况下，您从服务器获取游乐场，游乐场中的脚本在浏览器的 JavaScript 引擎（客户端）上运行，但没有任何内容发送回服务器。

例如，一个大问题是，如果没有任何安全措施，您可以将恶意游乐场发送回服务器以保存它（如 codepen）。通过这种方式，您可以在不同级别注入代码：服务器框架、数据库（SQL 注入）。如果其他人能够打开您的恶意游乐场，那么危险的脚本将在他们的客户端运行（XSS 和 CSRF 攻击）。

因此，每个输入都可能构成威胁，您必须​​通过执行输入清理在服务器端安全处理 和输出转义。