Question

我大致跟随this example。但一定要做些傻事......

服务器端Django视图代码：

data_table = gviz_api.DataTable(description)
data_table.LoadData(data)
json = data_table.ToJSon()
return json

这些是从pydev调试器复制粘贴的变量的值:(我只是为每个描述字段类型使用字符串进行测试）

描述：

[("sensor","string", "Sensor name"), 
 ("timestamp","string", "Time"),
 ("value","string", "Sensor value")]

数据：

[['testsensor', '2011-05-09 16:06:43.936000', '22.0'],
['testsensor', '2011-05-09 16:56:23.367000', '23.0']]

json（由google api生成）：

{cols:[{id:'sensor',label:'Sensor name',type:'string'},{id:'timestamp',label:'Time',type:'string'},{id:'value',label:'Sensor value',type:'string'}],rows:[{c:[{v:'testsensor'},{v:'2011-05-09 16:06:43.936000'},{v:'22.0'}]},{c:[{v:'testsensor'},{v:'2011-05-09 16:56:23.367000'},{v:'23.0'}]}]}

接收json的客户端javascript代码：

var json_table = new google.visualization.Table(document.getElementById('dataview'));
var json_data = new google.visualization.DataTable(data, 0.6);
json_table.draw(json_data, {showRowNumber: true});

这会导致构造DataTable对象时出现以下错误（第二行）：

Uncaught Error: Invalid JSON string: {cols:[{id:'sensor',label:'Sensor name',type:'string'},{id:'timestamp',label:'Time',type:'string'},{id:'value',label:'Sensor value',type:'string'}],rows:[{c:[{v:'testsensor'},{v:'2011-05-09 16:06:43.936000'},{v:'22.0'}]},{c:[{v:'testsensor'},{v:'2011-05-09 16:56:23.367000'},{v:'23.0'}]}]}
in default,table.I.js:152

我知道整个线索确保架构格式与数据格式匹配，但似乎是这种情况。一定很简单。

Answer 1

确保在'unsafe-eval'中为脚本来源添加 Content-Security-Policy 。

我用于Google地图和Google Charts的政策：

<meta
  http-equiv="Content-Security-Policy"
  content="
    default-src 'self';
    script-src 'self' 'unsafe-inline' 'unsafe-eval' maps.googleapis.com www.google.com www.google-analytics.com;
    img-src 'self' csi.gstatic.com www.google-analytics.com maps.gstatic.com maps.googleapis.com;
    style-src 'self' 'unsafe-inline' www.google.com fonts.googleapis.com ajax.googleapis.com;
    font-src 'self' fonts.gstatic.com;
  "
/>

Answer 2

不幸的是我无法发表评论，所以这不是一个完整的答案，但你可以尝试在使用它之前评估JSON吗？

var json_table = new google.visualization.Table(document.getElementById('dataview'));
var evalledData = eval("("+data+")");
var json_data = new google.visualization.DataTable(evalledData, 0.6);
json_table.draw(json_data, {showRowNumber: true});

我认为过去可能已经为我解决了这个问题;它可能不是最安全的方法，但你至少可以尝试进行测试。

或者，或许可以使用simplejson从python中转储你的json字符串而不是只返回gviz字符串？

Answer 3

JSON解析器应该要求字段名称用双引号分隔，如规范JSON RFC 4627中所述：

对象是无序集合零个或多个名称/值对，其中名称是字符串[...]字符串以引号开头和结尾。

因此，JSON应格式如下：

{
    "cols": [
        {
            "id": "sensor",
            "label": "Sensor name",
            "type": "string" 
        },
        {
            "id": "timestamp",
            "label": "Time",
            "type": "string" 
        },
        {
            "id": "value",
            "label": "Sensor value",
            "type": "string" 
        } 
    ],
    "rows": [
        {
            "c": [
                {
                    "v": "testsensor" 
                },
                {
                    "v": "2011-05-09 16: 06: 43.936000" 
                },
                {
                    "v": "22.0" 
                } 
            ] 
        },
        {
            "c": [
                {
                    "v": "testsensor" 
                },
                {
                    "v": "2011-05-09 16: 56: 23.367000" 
                },
                {
                    "v": "23.0" 
                } 
            ] 
        } 
    ]
}

Answer 4

有同样的问题，即使将选项剥离到空字典（导致错误“无效的JSON字符串：{}”...）。事实证明问题在于脚本-src CSP，在此处记录：https://github.com/keen/keen-js/issues/394

“解决方案”是将不安全评估添加到CSP。

Google可视化API示例中的“无效的JSON字符串”

4 个答案: