又拍云存储 - 我能通过Angular.JS来使用表单提交API吗
高洛峰
高洛峰 2017-05-15 16:49:07
0
4
605

现有的业务完全使用了前端Angular.JS的单页应用,所有请求均通过ajax发出。

现在我想实现在客户端直接向又拍云上传文件,尝试了angular file upload,但是提交的结果是

400: not accept, miss signature

抓包得知,policy和signature的表单数据根本没有提交。
我是这样写的:

$scope.onFileSelect = function ($files) { var file = $files[0]; //这里我只传单个文件 $scope.upload = $upload.upload({ url: 'http://v0.api.upyun.com/youguess', method: 'POST', headers: {'Content-Type': 'multipart/form-data'}, data: { signature: 'youguess', policy: 'youguess' }, fileFormDataName: 'file', file: file, formDataAppender: function (formData, key, value) { if (angular.isArray(value)) { angular.forEach(value, function(v) { formData.append(key, v); }); } else { formData.append(key, value); } } }).progress(function (event) { console.log(parseInt(100.0 * event.loaded / event.total)); }).success(function (data, status, headers, config) { console.log(data); }); };

我参考了这个github项目的这个和这个issues

what should I do?

我同时还有两个疑问:

  1. signature我可以直接md5加密好写上,这个md5直接写在客户端是否有安全问题?
  2. policy能不能在js中base64编码生成,因为我看官方给的demo是在php内生成的。如果可以在前端生成,把这个过程写在前端是否也会引发安全问题?
高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

reply all (4)
世界只因有你

Referenced this issue
As long as the signature security issue is resolved, the file can be uploaded successfully. Thank you everyone.

Solution:

  • Remove headers
  • Remove formDataAppender
    为情所困

    hi Let me answer your next two questions first:

      The signature of
    • signature includesform_api_secret的,所以若在前端直接写时,确实会存在安全问题:其他人拿到你的form_api_secret, and you can write your own form to submit files to your space and use your traffic.

    • policy can be generated on the front end using base64. Although policy is the content of the encode parameter and there is no security issue, but because of$signature = md5($policy.'&'.$form_api_secret);, there will still be the security issue mentioned above.

    Regarding the code question, @PenaFong has been invited to answer it.

      Ty80

      The signature is generated by requesting the backend as needed, and the form_api_secret will be exposed when calculated on the frontend

        给我你的怀抱

        http://stackoverflow.com/questions/24443246/angularjs-how-to-upload-multipart-form-data-and-a-file
        http://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs

          Latest Downloads
          More>
          Web Effects
          Website Source Code
          Website Materials
          Front End Template
          About us Disclaimer Sitemap
          php.cn:Public welfare online PHP training,Help PHP learners grow quickly!