Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

手写v-html 和 v-text #395

Open
jlx2002 opened this issue Jan 16, 2023 · 0 comments
Open

手写v-html 和 v-text #395

jlx2002 opened this issue Jan 16, 2023 · 0 comments

Comments

@jlx2002
Copy link
Contributor

jlx2002 commented Jan 16, 2023

v-html 和 v-text 的实现思路

v-html : 获取 dom 根据innerHTML操作dom
v-text : 获取 dom 根据innerText 操作dom
慎用 v-html , 如果使用不当,可能被用户提交的内容造成xxs 攻击

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root">
      <div v-text="str" id="ss"></div>
      <div v-html="template" id="temp"></div>
    </div>
  </body>
  <script>
    let dic = {
      str: "test",
      template: `<a style='color:red' href='https://www.baidu.com?token=xxx' onclick='alert(1)' >hhh</a>`,
    };

    let strDiv = document.getElementById("ss");
    let tempDiv = document.getElementById("temp");

    function vtext(element) {
      let attributes = element.attributes;
      // 遍历元素的每一个属性
      for (let j = 0; j < attributes.length; j++) {
        let attributeName = attributes[j].name;
        let attributeValue = attributes[j].value;
        if (attributeName == "v-text") element.innerText = dic[attributeValue];
      }
    }

    function vhtml(element) {
      let attributes = element.attributes;
      // 遍历元素的每一个属性
      for (let j = 0; j < attributes.length; j++) {
        let attributeName = attributes[j].name;
        let attributeValue = attributes[j].value;
        if (attributeName == "v-html") element.innerHTML = dic[attributeValue];
      }
    }

    vtext(strDiv);
    vhtml(tempDiv);
  </script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant