kazeburo/gist:703239

## gistfile1.pl
#!/usr/bin/perl

use strict;
use warnings;
use Encode;
use utf8;
use JSON;
use Text::Xslate;
use Plack::Request;
use Data::Rmap qw//;
use Scalar::Util qw(blessed);

my $tx = Text::Xslate->new(
    syntax => 'TTerse',
    function => {
        jsgateway => sub {
            my $hashref = shift;
            Data::Rmap::rmap_to {
                Data::Rmap::cut($_) if blessed $_;
                return if ref $_;
                $_ = Text::Xslate::unmark_raw(Text::Xslate::html_escape($_))
            } Data::Rmap::ALL, $hashref;
            my $json = JSON->new->ascii->encode($hashref);
            my $bs = '\\';
            $json =~ s!/!${bs}/!g;
            $json =~ s!<!${bs}u003c!g;
            $json =~ s!>!${bs}u003e!g;
            $json =~ s!&!${bs}u0026!g;
            Text::Xslate::mark_raw($json);
        },
    }
);

sub {
    my $env = shift;
    my $req = Plack::Request->new($env);
    my $param = {
        'query' => decode_utf8($req->param('query') // "default foo"),
        'hoge'  => q!&"bar'<b>baz</b>\ / </script>! . qq!\r\nfoo\x{2028}hoge!,
        'hashref' => { 'a' => 'b', 'c' => 'd', 'e' => { 'f' => 'g' } },
    };
    return [
        200,
        ['Content-Type'=>'text/html; charset=UTF-8'],
        [encode_utf8($tx->render_string(<<'EOF',
<html>
<script type="text/javascript"><!--//<![CDATA[
String.prototype.unescapeHTMLx = function () {
    var temp = document.createElement("div");
    temp.innerHTML = this;
    var result = temp.childNodes[0].nodeValue;
    temp.removeChild(temp.firstChild);
    return result;
}
if (!window['JSGateway']) {
    window.JSGateway = {
        _params : {},
        getParam:function(key){
            var obj = JSGateway;
            return obj._params[key];
        },
        setParam:function(value){
            var obj = JSGateway;
            obj._params=value;
        }
    };
}
JSGateway.setParam([% $js_param | jsgateway %]);
//]]>--></script>
<body>
<script>
</script>
<br />
<button onclick="alert(JSGateway.getParam('hoge').unescapeHTMLx())">サンプル: unescapeHTML alert</button>
<button onclick="document.getElementById('output').innerHTML=JSGateway.getParam('hoge')">サンプル: そのまま innerHTML</button>
<button onclick="alert(JSGateway.getParam('query'))">query そのまま alert</button>
<button onclick="alert(JSGateway.getParam('query').unescapeHTMLx())">query unescapeHTML alert</button>
<button onclick="document.getElementById('output').innerHTML=JSGateway.getParam('query')">query そのまま innerHTML</button>
<button onclick="document.getElementById('output').innerHTML=JSGateway.getParam('query').unescapeHTMLx()">query unescapeHTML innerHTML</button>
<div id="output">sample</div>
</body>
</html>
EOF
        { js_param => $param },
        ))]
    ];
}
	#!/usr/bin/perl

	use strict;
	use warnings;
	use Encode;
	use utf8;
	use JSON;
	use Text::Xslate;
	use Plack::Request;
	use Data::Rmap qw//;
	use Scalar::Util qw(blessed);

	my $tx = Text::Xslate->new(
	syntax => 'TTerse',
	function => {
	jsgateway => sub {
	my $hashref = shift;
	Data::Rmap::rmap_to {
	Data::Rmap::cut($_) if blessed $_;
	return if ref $_;
	$_ = Text::Xslate::unmark_raw(Text::Xslate::html_escape($_))
	} Data::Rmap::ALL, $hashref;
	my $json = JSON->new->ascii->encode($hashref);
	my $bs = '\\';
	$json =~ s!/!${bs}/!g;
	$json =~ s!<!${bs}u003c!g;
	$json =~ s!>!${bs}u003e!g;
	$json =~ s!&!${bs}u0026!g;
	Text::Xslate::mark_raw($json);
	},
	}
	);

	sub {
	my $env = shift;
	my $req = Plack::Request->new($env);
	my $param = {
	'query' => decode_utf8($req->param('query') // "default foo"),
	'hoge' => q!&"bar'<b>baz</b>\ / </script>! . qq!\r\nfoo\x{2028}hoge!,
	'hashref' => { 'a' => 'b', 'c' => 'd', 'e' => { 'f' => 'g' } },
	};
	return [
	200,
	['Content-Type'=>'text/html; charset=UTF-8'],
	[encode_utf8($tx->render_string(<<'EOF',
	<html>
	<script type="text/javascript"><!--//<![CDATA[
	String.prototype.unescapeHTMLx = function () {
	var temp = document.createElement("div");
	temp.innerHTML = this;
	var result = temp.childNodes[0].nodeValue;
	temp.removeChild(temp.firstChild);
	return result;
	}
	if (!window['JSGateway']) {
	window.JSGateway = {
	_params : {},
	getParam:function(key){
	var obj = JSGateway;
	return obj._params[key];
	},
	setParam:function(value){
	var obj = JSGateway;
	obj._params=value;
	}
	};
	}
	JSGateway.setParam([% $js_param \| jsgateway %]);
	//]]>--></script>
	<body>
	<script>
	</script>
	<br />
	<button onclick="alert(JSGateway.getParam('hoge').unescapeHTMLx())">サンプル: unescapeHTML alert</button>
	<button onclick="document.getElementById('output').innerHTML=JSGateway.getParam('hoge')">サンプル: そのまま innerHTML</button>
	<button onclick="alert(JSGateway.getParam('query'))">query そのまま alert</button>
	<button onclick="alert(JSGateway.getParam('query').unescapeHTMLx())">query unescapeHTML alert</button>
	<button onclick="document.getElementById('output').innerHTML=JSGateway.getParam('query')">query そのまま innerHTML</button>
	<button onclick="document.getElementById('output').innerHTML=JSGateway.getParam('query').unescapeHTMLx()">query unescapeHTML innerHTML</button>
	<div id="output">sample</div>
	</body>
	</html>
	EOF
	{ js_param => $param },
	))]
	];
	}