Django と AngularJS を一緒に使う際に Django 側で {{ }} が展開されるのを防ぐ

Django も AngularJS もテンプレート中の {{ }} を変数・関数用のトークンとして利用するため、AngularJS の方で処理したい {{ }} は Django の方で解釈されるのを防ぐ必要があります。

AngularJS で処理したいタグの周りを verbatim ~ endverbatim タグで囲むことで Django が {{ }} を処理するのを防ぎます。

<body ng-app="TestApp">
<div ng-controller="TestController as tc">
    {% verbatim %}
    <p>{{ tc.message }}</p>
    {% endverbatim %}
</div>

Polymer : core-ajax post 用テンプレート（+ Django）

POST のパラメータの上手い渡し方がよくわからないので、しばらくはこれでいこうというメモ。

template 部分（入力部分とかは適当に。core-ajax は実際は djang-ajax を使う。）

 
<paper-input-decorator label="" error="入力必須" isInvalid="{{!$.input_name.validity.valid}}">
    <input is="core-input" id="input_name" required type="text" value="{{ name }}">
</paper-input-decorator>
<paper-button on-click="{{ post_data }}"></paper-button>
<core-ajax
    id="post"
    url="/someurl"
    method="post"
    handleAs="json"
    on-core-response="{{ response }}"
    on-core-error="{{ error }}">
</core-ajax>

script 部分

post_data: function() {
    if(!this.$.input_name.validity.valid){
        alert("名前を入力してください");
    } else {
        var data = {
            'name': this.name,
        };
        this.$.post.body = "data=" + JSON.stringify(data);
        this.$.post.go();
    }
},
response: function (event, response) {
    
},
error: function(event, response) {
    
}

受け取り側（Python Django）

class ActivityInfoListApi(View):
    def post(self, request, *args, **kwargs):
        data = request.POST.get("data", None)
        if data is None or len(data) == 0:
            return HttpResponseBadRequest()
        obj = json.loads(data)
        try:
            name = obj["name"]
            # 型チェック
            if (not isinstance(name, str) and not isinstance(name, unicode)):
                return HttpResponseBadRequest()
            # 受け取った値で何か処理…
            return HttpResponse("json形式文字列…")
        except KeyError:
            logging.error("Missing Parameter")
            return HttpResponseBadRequest()

Django + Polymer : Ajax 時の CRFS 対策 （403 エラーへの対応）

ここ に書いたように url に View を登録するときに csrf_exempt を使うことで CSRF 対策を切って　403 エラーを回避していましたが、Polymer 使用時には Django-enabled Polymer core-ajax variant を使うことで簡単に対応できる事がわかりました。

1. リンク先の django-ajax を django-ajax.html という名前で保存する
2. Polymer 内で core-ajax を使っていた部分を django-ajax に置き換える
1. インポートを忘れずに
3. {% csrf_token %} を html に含めてレンダリングする

django-ajax は core-ajax を継承していて、ajax 時のヘッダに csrf トークンを追加してくれる、という寸法のようです。

先人の知恵というのはありがたいものですね。リンク先に感謝です。

Django : Ajax POST 時に 403 エラー出る場合の対処法

幾つか解決策はあるようですが、ひとまず url 登録時に csrf_exempt をつけています。
おそらくセキュリティ的にあまりよくなさそうなので Cross Site Request Forgery protection 辺りを参照していずれきちんと理解したいと思います。。。

from django.views.decorators.csrf import csrf_exempt
....
url(r'^category$', csrf_exempt(MyViewClass.as_view())),