This is the 9th day of my participation in the August Wen Challenge.More challenges in August

preface

Then the front end step pit note (4) the problem serial number continues to share

Problem 21: Iframe security risk

Sometimes front-end pages are introduced with iframes to display other people’s websites or components, such as embedded ads. However, some iframe security can not be evaluated and tested, sometimes carrying third-party plug-ins, or embedded with unsafe scripts, which are worth considering.

Solutions:

  1. Use a secure website for embedding;
  2. Add a property called sandbox to an iframe, and the browser controls the content of the iframe. See the API documentation for details

Problem 22: Third-party dependency security risks

Today, project development, a lot of all like to use other people to write a good framework, in order to convenient, set up the project soon, write their own less than 20% of the code, excessive use third party dependence or plug-in, on the one hand can affect performance problems, rely on the other hand, the third party or plug-in exists a lot of security problems, can also exist such as holes, So use it carefully.

Solution: It is impossible to manually check the Security problems that depend on it. It is better to use some automatic tools for scanning, such as NSP(Node Security Platform), Snyk and so on.

Question 23: V-for and V-IF

In Vue, V-for has a higher priority than V-IF, and each V-IF judgment is preceded by a V-for loop. So if the v-if criteria are independent of item, write it like this:

<div v-for="item in items" :key="item.id" v-if="status"></div>
Copy the code

Not good.

We should place v-if on the parent of the node for judgment processing.

<div v-if="status==true">
    <div v-for="item in items" :key="item.id"></div>
</div>
Copy the code

Problem 24: Overflow-x: Scroll for horizontal scrolling on mobile terminals will lag

Solutions:

  • -webkit-overflow-scrolling: touch;
  • transform: translate3d(0, 0, 0); (Basically, hardware acceleration is turned on.)

Problem 25: In IOS on H5 mobile terminal, the page is enlarged when input gets the focus

Setting meta Tags

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="Width =device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
Copy the code