Error: Permission denied to access property ‘target’ in JavaScript

"Error − Permission denied to access property 'target'" is a common error message that can occur when working with JavaScript, especially when attempting to access the target property of an event object. This error occurs when a script is trying to access a property or method of an object that it does not have permission to access. In this tutorial, we will discuss the causes of this error and how to fix it.

Understanding the Error

The "Error − Permission denied to access property 'target'" is typically caused by the use of the target property of an event object in a context where the script does not have permission to access it. The target property of an event object refers to the element on which the event occurred. For example, if a user clicks on a button, the target property of the click event would refer to the button element.

The error occurs when the script is trying to access the target property from an object, like a window object, where it does not have permission to access it. This can happen, for example, when the script is running in a different context or if it has been loaded from a different origin.

Causes of the Error

There are several common causes of the "Error: Permission denied to access property 'target'" error −

Cross-Origin Scripting − This error can occur when a script is loaded from a different origin than the page that is trying to access it. This is a security feature in web browsers to prevent malicious scripts from accessing sensitive information or executing unauthorized actions on a page.

Incorrect Event Handling − This error can occur when a script is trying to access the target property of an event object before it has been fully initialized. For example, if you try to access the target property inside the document.onload event handler, you will get this error because the target property is not yet accessible at that time.

Object is not Event object − This error can occur when a script is trying to access the target property of an object that is not an event object. For example, if you try to access the target property of a window object, you will get this error because the window object is not an event object.

How to Fix the Error?

The solution to the "Error: Permission denied to access property 'target'" error will depend on the cause of the error. Here are some common ways to fix this error −

Check the Origin − If the error is caused by cross-origin scripting, you can fix it by checking the origin of the script and making sure that it is the same as the origin of the page. This can be done using the document.location.origin property.

Use Correct Event Handlers − If the error is caused by incorrect event handling, you can fix it by using the correct event handlers. For example, instead of using the document.onload event handler, you should use the window.onload event handler.

Check the object type − if the error is caused by trying to access the target property of an object that is not an event object, you can fix it by ensuring that the object you're trying to access the property on is actually an event object.

Additionally, as an alternative way, you can use event.currentTarget instead of event.target if you are using event delegation. CurrentTarget property always refers to the element that you've bound the event listener to, and target refers to the element that triggered the event. Using event.currentTarget would ensure that you are always able to access the correct object and avoid the "Error: Permission denied to access property 'target'" error.

Check for access rights − If the error is caused by permissions denied in the browser you can check the browser’s settings and ensure that the page has the correct permissions to access the property.

Make use of try catch block − To handle situations where the error could occur, you can use a try-catch block in your code. This will help you to catch and handle the error in a more appropriate manner and avoid the script crashing.

try{
   // code that throws error
}catch(e){
   console.log(e);
}

Example

This error could occur in different ways, but the most common way it could happen is by trying to access a property or method on a window object across different domains, this is known as the "Same-origin policy" where scripts on a web page are only allowed to access properties and methods of the window object if they are from the same origin as the page. This restriction is implemented in order to prevent malicious scripts from accessing sensitive information or executing unauthorized actions on a page.

Here is an example −

<html>
<head>
   <title>Accessing properties across different domains</title>
</head>
<body>
   <div id="print"></div>
   <script>
      // This script runs on example1.com
      var iframe = document.createElement("iframe");
      iframe.src = "https://www.tutorialspoint.com";
      document.body.appendChild(iframe);

      var target = iframe.contentWindow.document.querySelector("p"); // Refused to display 'https://www.tutorialspoint.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
      document.getElementById("print").innerHTML = JSON.stringify(target); //null
   </script>
</body>
</html>

Conclusion

The "Error: Permission denied to access property 'target'" error is a common issue that can occur when working with JavaScript. Understanding the causes of the error and using the appropriate techniques to fix it can help you to avoid this error and ensure that your script runs smoothly.

Always pay attention to the origin of the script, the context of the script and the type of object you're trying to access the property on, and check for access rights. By doing so, you can ensure that your script has the necessary permissions to access the properties it needs and avoid the "Error: Permission denied to access property 'target'" error.

Furthermore, it's always good practice to catch the error and handle it in a way that won't break the script. And that's the key takeaway from this tutorial, how to handle the error gracefully.