Lesson learned: You can’t access DOM elements within an external iFrame

While working with Google Custom Search Engine (CSE), I needed to access elements within the <iframe> containing the search results it generated. Using jQuery, I tried to select the iframe first and its content:

$('#cse-search-results iframe').contents();

But as soon as I tried to do something with it, I’d get a “Error: Permission denied to access property ‘nodeType’” message.

Turns out, <iframes> follow the same origin policy, which prevents you from accessing them directly if they weren’t generated from your own domain. Of course, you can create a proxy file with PHP to retrieve the data first and then add the resulting HTML to your script to get around this problem.

I know, I know… it makes sense now. But I just didn’t know, so, lesson learned!