Jump to content

How to prevent code injection from breaking site?

Recommended Posts

 

Hi there, 

I have an issue with one of my sites: 

https://tlcdesign-hillarydemo.squarespace.com/?password=demo

I used code injection to install a plugin but using this script breaks the site, I am unable to edit without using safe mode because it causes the "add section" button to either disappear completely or become misaligned and unclickable (see screenshot). I'm perfectly ok with using safe mode, however, I sell this site as a template and its a bit inconvenient and confusing for inexperienced clients to work with, and I feel its a bit unprofessional for me to tell them to do that so this is hurting my business.

Is there any other solution to this? I would like to keep the sticky effect.

Thank you

 

 

Code used:

<style>
@media screen and (min-width: 768px) {
#header {
  position: sticky;
  top: 0;
  display: none;
  z-index: 4000 !important;
  width: 100vw;
}
main .page-section:first-child + #header {
  display: block;
}
main .page-section:first-child {
  min-height: calc(94vh - 93px)!important;
}
}
</style>

<script> 
document.addEventListener("DOMContentLoaded",function() {
    const header = document.getElementById('header');
    const firstSection = document.querySelector('.page-section:first-child');
    firstSection.after(header);
});
</script>

Screenshot 2023-05-11 at 10.12.59.png

Edited by TLCDesigns
Link to comment
On 5/12/2023 at 8:57 AM, tuanphan said:

We can disable code in edit mode without using safe mode.

You want to disable CSS code (<style> code) or script code (<script>)?

Ok great, how do I do that?

I would like to disable the following script in edit mode without using safe mode because I think that is what is causing the issue.

 

<script> 
document.addEventListener("DOMContentLoaded",function() {
    const header = document.getElementById('header');
    const firstSection = document.querySelector('.page-section:first-child');
    firstSection.after(header);
});
</script>

Link to comment
On 5/15/2023 at 3:29 PM, TLCDesigns said:

Ok great, how do I do that?

I would like to disable the following script in edit mode without using safe mode because I think that is what is causing the issue.

 

<script> 
document.addEventListener("DOMContentLoaded",function() {
    const header = document.getElementById('header');
    const firstSection = document.querySelector('.page-section:first-child');
    firstSection.after(header);
});
</script>

First, create a .js file with name: header.js and paste this code into js file (You can use Notepad++ or Notepad to do this)

document.addEventListener("DOMContentLoaded",function() {
    const header = document.getElementById('header');
    const firstSection = document.querySelector('.page-section:first-child');
    firstSection.after(header);
});

Next, upload header.js to your Squarespace

Next, use this code into Code Injection

<script>
	document.addEventListener('DOMContentLoaded', function() {
      if ( window.location == window.parent.location ) {
          var script = document.createElement('script');
          script.type = 'text/javascript';
          script.src = '/s/header.js';    

          document.getElementsByTagName('head')[0].appendChild(script);
      } else {
          console.log('iframe');
      }
  });
</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 weeks later...
On 5/19/2023 at 2:22 PM, tuanphan said:

First, create a .js file with name: header.js and paste this code into js file (You can use Notepad++ or Notepad to do this)

document.addEventListener("DOMContentLoaded",function() {
    const header = document.getElementById('header');
    const firstSection = document.querySelector('.page-section:first-child');
    firstSection.after(header);
});

Next, upload header.js to your Squarespace

Next, use this code into Code Injection

<script>
	document.addEventListener('DOMContentLoaded', function() {
      if ( window.location == window.parent.location ) {
          var script = document.createElement('script');
          script.type = 'text/javascript';
          script.src = '/s/header.js';    

          document.getElementsByTagName('head')[0].appendChild(script);
      } else {
          console.log('iframe');
      }
  });
</script>

 

I tried this solution but it didnt work unfortunately 

Link to comment
  • 4 months later...
On 10/23/2023 at 5:15 PM, TLCDesigns said:

 

Ahh - I changed it to lower case but it still didn't work.

Also I need to remove the original script ? If i remove it the design effect is gone

Can you check file again? I tried access header.js but it doesn't exist

https://tlcdesign-hillarydemo.squarespace.com/s/header.js

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...
  • 3 weeks later...

If you still need help, try this code

<script>
// If the current page isn't in an iframe then run the code
if (window.top === window.self) {
    var script = document.createElement('script');
    script.src = '/s/header.js'; // Replace with your script's URL
    document.head.appendChild(script);
} 
</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.