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>
Improve this question
3
  • 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
    Commented Jul 10, 2018 at 20:30
  • @Robert, I tried by taking out <html>, <head>, and <body>. The same result . still keeping search. No result
    – Jen
    Commented Jul 10, 2018 at 23:24
  • Trying adding the code in text file and refer the same in content editor. It should work.
    – Deepmala
    Commented Jul 11, 2018 at 3:23

3 Answers 3

Reset to default
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.
Improve this answer
1
  • Still the same issue
    – Jen
    Commented Jul 11, 2018 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.

Improve this answer
1
  • Still the same.
    – Jen
    Commented Jul 11, 2018 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.

Improve this answer
1
  • 100% doesn't work sir
    – Jen
    Commented Jul 11, 2018 at 16:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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