Search code examples
djangoimagehttpreferer

how to avoid referer checking in django?

I have to web page using django.

In html, I assign external image link to img src tag.

but, 403 forbidden error and not show image.

when I paste image external link to browser address, the image show.

I think.. it is referer checking. so I use ReferrerKiller.js in Changing the http referer in javascript.

first image is shown. but other is not.

I check network using chrome developer tool.

enter image description here

other image canceled. I don't know that.

I want to listen any idea about this problem.. Referer checking and why show only first image? other not?

below home.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
{% load staticfiles %}

<html> 
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script type="text/javascript" src="{% static "js/ReferrerKiller.js" %}"></script>
<title>island</title> 
</head>
<body> 
<h1> nanpa </h1> 
<br/>

{% for entrySummary in entrySummaryList %} 
    title : 
    <a href="{{entrySummary.entry_link}}">{{ entrySummary.entry_title }}</a>
    {{ entrySummary.entry_pub_date }} <br/>

    description : {{ entrySummary.entry_description }} <br/>
    image : <span id="image_kill_referrer"></span> 
    <!-- <img src= ("{{ entrySummary.entry_representaion_img }}"/> -->
    <script>
    document.getElementById('image_kill_referrer').innerHTML = ReferrerKiller.imageHtml("{{
    entrySummary.entry_representaion_img }}");
    </script>   
{% endfor %}   
</body> 
</html>
Solution

  • document.getElementById() returns only one item (the first item, because all images in you code have same id). Use another methods like document.getElementsByClassName.

    Try following code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
{% load staticfiles %}

<html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <script type="text/javascript" src="{% static "js/ReferrerKiller.js" %}"></script>
        <title>island</title> 
    </head>

    <body> 
        <h1> nanpa </h1>
        <br/>

    {% for entrySummary in entrySummaryList %} 
        title :
        <a href="{{entrySummary.entry_link}}">{{ entrySummary.entry_title }}</a>
        {{ entrySummary.entry_pub_date }} <br/>

        description : {{ entrySummary.entry_description }} <br/>
        image : <span class="image_kill_referrer"></span>
    {% endfor %} 
        <script>
        var i, images = document.getElementsByClassName('image_kill_referrer');
        var urls = [
    {% for entrySummary in entrySummaryList %} 
            "{{ entrySummary.entry_representaion_img }}",
    {% endfor %}
            "DUMMY"
        ];
        for (i = 0; i < images.length; i++) {
            images[i].innerHTML = ReferrerKiller.imageHtml(urls[i]);
        }
        </script>
    </body>
</html>

    Or, use different id for each image:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
{% load staticfiles %}
<html> 
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <script type="text/javascript" src="{% static "js/ReferrerKiller.js" %}"></script>
        <title>island</title> 
    </head>
    <body> 
        <h1> nanpa </h1> 
        <br/>

    {% for entrySummary in entrySummaryList %} 
        title : 
        <a href="{{entrySummary.entry_link}}">{{ entrySummary.entry_title }}</a>
        {{ entrySummary.entry_pub_date }} <br/>

        description : {{ entrySummary.entry_description }} <br/>
        image : <span id="image_kill_referrer{{ forloop.counter }}"></span> 
        <script>
        document.getElementById('image_kill_referrer{{ forloop.counter }}').innerHTML = ReferrerKiller.imageHtml("{{
        entrySummary.entry_representaion_img }}");
        </script>   
    {% endfor %}   
    </body> 
</html>