0

I just trying to inject the following HTML script using content editor web part in SharePoint online. My web part page keeping searching, not displaying the result. Found Error:

enter image description here

Here is the code:

    <html>
    <head>
    <style>
    * {box-sizing: border-box}
    body {font-family: "Lato", sans-serif;}

    /* Style the tab */
    .tab {
    float: left;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
    width: 250px;
    height: 900px;
    }

    /* Style the buttons inside the tab */
    .tab button {
    display: block;
    background-color: inherit;
    color: black;
    padding: 10px 16px;
    width: 100%;
    border: none;
    outline: none;
    text-align: left;
    cursor: pointer;
    transition: 0.3s;
    font-size: 17px;
    }

    /* Change background color of buttons on hover */
     .tab button:hover {
    background-color: #ddd;
    }

    /* Create an active/current "tab button" class */
    .tab button.active {
    background-color: #ccc;
     }

     /* Style the tab content */
    .tabcontent {
     float: left;
     padding: 0px 12px;
     border: 1px solid #ccc;
     border-left-style: 1px solid #ccc;
     width: 750px;
     border-left: none;
     height: 900px;
     }
   </style>
   </head>
   <body>

   <p><img src="world_small.png"   hight="600px"  width="1000px" alt="world 
   map"></p>
           <div class="tab">
          <button class="tablinks" onclick="openCity(event, 'USA')" 
           id="defaultOpen">USA</button>
            </div>
          <div id="USA" class="tabcontent">
         <h3>USA</h3>
          <p>David , CEO</p>
          <p>Michel, V/CEO</p>
           </div>
        <script>
     function openCity(evt, cityName) {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
        document.getElementById(cityName).style.display = "block";
       evt.currentTarget.className += " active";
    }

    // Get the element with id="defaultOpen" and click on it
    document.getElementById("defaultOpen").click();
    </script>     
    </body>
    </html>
  • Have you tried not injecting a full HTML document but only the HTML that you need? I suspect the browser thinks this looks like a cross-site scripting attack. Try leaving the <html>, <head>, and <body> tags out. – Robert Kaucher Jul 10 '18 at 20:30
  • @Robert, I tried by taking out <html>, <head>, and <body>. The same result . still keeping search. No result – Jen Jul 10 '18 at 23:24
  • Trying adding the code in text file and refer the same in content editor. It should work. – Deepmala Jul 11 '18 at 3:23
3

Add script editor web part in place of content editor web part if you need to embed script directly in the web part.
And if you require to work only with content editor web part then you need add the script into a separate file in SharePoint and reference the path of it to the content editor web part.

For reference you can refer

And adding html directly into content editor web part verify that you have followed the steps.

  • Add a Content Editor web part to the page.
  • (Click on the link to add new content, if you are using a web part page.)
  • Click on the Edit Source button in the ribbon.
  • Paste your JavaScript code in the HTML source.
  • Apply and save the page.
  • Still the same issue – Jen Jul 11 '18 at 15:01
1

This is because of XSS protection enabled by chrome in recent updates.

Follow below steps. This worked for me.

  1. Find the Chrome icon on your computer. Then right click it, and from the drop-down list, choose 'properties'.

  2. On the properties page, find the target line and add this to the end of the line: -disable-xss-auditor When you add the above, the full target line will be: C:\Program Files (x86) \Google\Chrome\Application\chrome.exe" -disable-xss-auditor Or if using the 64-bit version of Google Chrome: C:\Program Files\Google\Chrome\Application\chrome.exe" -disable-xss-auditor

  3. After making the above change, click 'apply'. Then close any open version of the Chrome browser, and restart Chrome.

  • Still the same. – Jen Jul 11 '18 at 14:56
0

Does it let you add anything into the script editor? Try this:

  1. Add the <style>...</style> content, did that work? Keep going
  2. Now add the html content, did that work? Keep going
  3. Add the <script>...</script> content
  4. If you made it here, magic!

If it stopped at step 1 you should test this in another browser like Edge or Firefox. Or even on another machine. Are you behind a firewall/proxy? If so try disabling that as well, if you can.

If it stopped at a specific step beyond 1, like step 3 (Javascript) figure out what the minimal amount of JS you can add would be. Does it block script tags, or is it blocking a specific portion of your script. Narrow it down to the exact line of code if you can, and figure out why that is. Maybe there's a special character that got inserted by accident.

  • 100% doesn't work sir – Jen Jul 11 '18 at 16:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.