Youpai Cloud Storage - Can I use the form submission API through Angular.JS

Question

The existing business completely uses the front-end Angular.JS single-page application, and all requests are sent through ajax.

Now I want to upload files directly to Youpaiyun on the client side. I tried angular file upload, but the submitted result was

400: not accept, miss signature

The packet capture revealed that the form data for policy and signature were not submitted at all.
This is what I wrote:

    $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);
        });
    };

I referred to this and this issues of this github project

what should I do?

I also have two questions:

1. I can directly encrypt the signature with md5 and write it. Is there any security issue if this md5 is written directly on the client?
2. Can the policy be generated by base64 encoding in js? Because I think the official demo is generated in php. If it can be generated on the front end, will writing this process on the front end also cause security issues?

Answer 1

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

Answer 2

hi Let me answer your next two questions first:

The signature of

• signature includes form_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.

Answer 3

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

Answer 4

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