S3直接在JavaScript中上传

S3直接在JavaScript中上传,javascript,amazon-web-services,amazon-s3,secret-key,Javascript,Amazon Web Services,Amazon S3,Secret Key,我正在尝试完成这个简单的任务,并将JavaScript直接上传到AmazonS3。但是,我将如何以及在何处隐藏我的访问权限和密钥?我在他们的文档或这个网站上没有看到任何答案 我正在使用他们推荐的方法在HTML中设置它。我也在使用主干和凉亭 <script src="https://sdk.amazonaws.com/js/aws-sdk-2.0.25.min.js"></script> <script type="text/javascript"> //

我正在尝试完成这个简单的任务,并将JavaScript直接上传到AmazonS3。但是,我将如何以及在何处隐藏我的访问权限和密钥?我在他们的文档或这个网站上没有看到任何答案

我正在使用他们推荐的方法在HTML中设置它。我也在使用主干和凉亭

<script src="https://sdk.amazonaws.com/js/aws-sdk-2.0.25.min.js"></script>
<script type="text/javascript">
  // See the Configuring section to configure credentials in the SDK
  AWS.config.credentials = ...;

  // Configure your region
  AWS.config.region = 'us-west-2';
</script>
<input type="file" id="file-chooser" /> 
<button id="upload-button">Upload to S3</button>
<div id="results"></div>

<script type="text/javascript">
  var bucket = new AWS.S3({params: {Bucket: 'myBucket'}});

  var fileChooser = document.getElementById('file-chooser');
  var button = document.getElementById('upload-button');
  var results = document.getElementById('results');
  button.addEventListener('click', function() {
    var file = fileChooser.files[0];
    if (file) {
      results.innerHTML = '';

      var params = {Key: file.name, ContentType: file.type, Body: file};
      bucket.putObject(params, function (err, data) {
        results.innerHTML = err ? 'ERROR!' : 'UPLOADED.';
      });
    } else {
      results.innerHTML = 'Nothing to upload.';
    }
  }, false);
</script>

//请参阅配置部分以在SDK中配置凭据
AWS.config.credentials=。。。;
//配置您的区域
AWS.config.region='us-west-2';
上传到S3
var bucket=new AWS.S3({params:{bucket:'myBucket'}});
var fileChooser=document.getElementById('file-chooser');
var-button=document.getElementById('upload-button');
var results=document.getElementById('results');
addEventListener('click',function(){
var file=fileChooser.files[0];
如果(文件){
results.innerHTML='';
var params={Key:file.name,ContentType:file.type,Body:file};
bucket.putObject(参数、函数(错误、数据){
results.innerHTML=err?'ERROR!':'UPLOADED';
});
}否则{
results.innerHTML='无需上传';
}
},假);

您不能在javascript中隐藏凭据,因为所有代码都会发送到客户端,因此可见。不过,要解决这个问题,您可以做很多事情:

  • 如果您的应用程序的用户是可信的和经过身份验证的,那么您可以选择只向经过身份验证的用户提供脚本,方法是在文件顶部的PHP中检查cookie,并适当地设置服务器以允许这样做
  • 或者,如果脚本的用户不受信任,我建议您将请求发送到服务器,而不是直接发送到S3。然后,您的服务器可以作为代理验证和处理文件传输,而不会公开密钥
您可以使用为每次上载生成短期临时凭据,并将这些凭据传递给JS SDK,这样您就不必公开长期API密钥

使用AWS PHP SDK(composer软件包:
“AWS/AWS SDK PHP”:“~2.4”
)的示例假设您的
访问密钥id
机密访问密钥
在环境中可用

草率的例子:

<?php 
include 'vendor/autoload.php';

use Aws\Sts\StsClient;

/** Create Temporary Credentials */
$stsclient = StsClient::factory();
$temp_creds = $stsclient->getSessionToken(900)->get('Credentials'); // 15 minute expiration

?>
<script>
AWS.config.credentials = {
    accessKeyId : '<?php echo $temp_creds['AccessKeyId']; ?>',
    secretAccessKey : '<?php echo $temp_creds['SecretAccessKey']; ?>',
    sessionToken : '<?php echo $temp_creds['SessionToken']; ?>'
};
AWS.config.region = 'your-region';
</script>

AWS.config.credentials={
accessKeyId:“”,
secretAccessKey:“”,
sessionToken:'
};
AWS.config.region='您所在的地区';
这样,您就不必透露您的访问权限
access\u key\u id
secret\u access\u key
。STS生成的密钥将在设置的时间间隔后失效。请确保遵循最佳做法,例如为长期存储的凭据创建有限角色IAM用户

参考: